<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"> </script>
</head>
<body>
  <div id="app1">
    <h1>实例1</h1>
    <hehe></hehe>
    <first-cmp></first-cmp>
  </div>
  <hr>
  <div id="app2">
    <h1>实例2</h1>
    <hehe></hehe>
  </div>

  <script>

   /*
    局部组件和全局组件的区别 注册的方式不一样
    通过配置项components注册 
    在哪注册在哪用
   */
    const hehe = Vue.extend({
      template: "<h1>这里是局部组件</h1>"
    })
    new Vue({
      el: "#app1", 
      components: {
        // 组件名： 组件
        hehe: hehe,
        FirstCmp: {
          template: "<h2>你好世界</h2>"
        }
      }
    })

    new Vue({
      el: "#app2", 
    })

    


  </script>
</body>
</html>